<script setup lang="ts">
import { ref, reactive } from 'vue'

// 定义录入项接口
interface EntryItem {
  id: number
  name: string
  value: string
  showForm: boolean
  category: string
  icon: string
}

// 搜索关键词
const searchKeyword = ref('')

// 录入项列表数据
const entryItems = reactive<EntryItem[]>([
  // 生理指标类
  { id: 1, name: '血压', value: '', showForm: false, category: '生理指标', icon: 'el-icon-monitor' },
  { id: 2, name: '血糖', value: '', showForm: false, category: '生理指标', icon: 'el-icon-sugar' },
  { id: 3, name: '体温', value: '', showForm: false, category: '生理指标', icon: 'el-icon-thermometer' },
  { id: 4, name: '心率', value: '', showForm: false, category: '生理指标', icon: 'el-icon-heart' },
  { id: 5, name: '体重', value: '', showForm: false, category: '生理指标', icon: 'el-icon-scale' },
  // 实验室检查类
  { id: 6, name: '血常规', value: '', showForm: false, category: '实验室检查', icon: 'el-icon-test-tube' },
  { id: 7, name: '尿常规', value: '', showForm: false, category: '实验室检查', icon: 'el-icon-flask' },
  { id: 8, name: '肝功能', value: '', showForm: false, category: '实验室检查', icon: 'el-icon-liver' },
  { id: 9, name: '肾功能', value: '', showForm: false, category: '实验室检查', icon: 'el-icon-kidney' },
  { id: 10, name: '血脂', value: '', showForm: false, category: '实验室检查', icon: 'el-icon-lipid' }
])

// 获取分类后的录入项
const getCategorizedItems = () => {
  const categories = {} as Record<string, EntryItem[]>

  entryItems.forEach(item => {
    if (!categories[item.category]) {
      categories[item.category] = []
    }
    categories[item.category].push(item)
  })

  return categories
}

// 抽屉显示状态
const drawer = ref(false)

// 当前激活的录入项
const activeItem = ref<EntryItem>({} as EntryItem)

// 切换表单显示状态
const toggleForm = (item: EntryItem) => {
  activeItem.value = item
  drawer.value = true
}

// 筛选功能
const filterItems = () => {
  // 实际项目中可以根据搜索关键词筛选entryItems
  console.log('筛选关键词:', searchKeyword.value)
}

// 拍照识别功能
const handlePhotoRecognition = (item: EntryItem) => {
  console.log('拍照识别:', item.name)
  // 这里可以调用相机API或上传图片API
}

// 表单提交
const handleSubmit = (item: EntryItem) => {
  console.log('提交数据:', item)
  // 提交后可以清空或隐藏表单
  item.showForm = false
}
</script>

<template>
  <div class="entry-content">
    <div class="entry-header">
      <h3>录入项选择</h3>
      <div class="search-filter">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索录入项"
          prefix-icon="el-icon-search"
          clearable
          class="search-input"
        ></el-input>
        <el-button type="primary" @click="filterItems">筛选</el-button>
      </div>
    </div>

    <!-- 分类展示录入项 -->
    <div class="categories-container">
      <div v-for="(items, category) in getCategorizedItems()" :key="category" class="category-section">
        <h4 class="category-title">{{ category }}</h4>
        <div class="category-items">
          <div v-for="item in items" :key="item.id" class="entry-card" @click="toggleForm(item)">
            <div class="entry-card-content">
              <div class="entry-icon">
                <i :class="item.icon"></i>
              </div>
              <div class="entry-name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 抽屉表单组件 -->
    <el-drawer v-model="drawer" :with-header="false" size="500px">
      <div class="drawer-content">
        <div class="drawer-header">
          <h3>{{ activeItem?.name || '' }} 数据录入</h3>
        </div>
        <div class="drawer-actions">
          <el-button type="primary" icon="el-icon-edit">表单填写</el-button>
          <el-button type="success" icon="el-icon-camera" @click="handlePhotoRecognition(activeItem)">OCR识别</el-button>
        </div>

        <el-form label-width="80px">
          <el-form-item label="数值">
            <el-input v-model="activeItem.value" placeholder="请输入数值"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit(activeItem)">提交</el-button>
            <el-button @click="drawer = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
.entry-content {
  background-color: #fff;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-filter {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.categories-container {
  margin-top: 20px;
}

.category-section {
  margin-bottom: 30px;
}

.category-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.category-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}

.entry-card {
  background-image: linear-gradient(135deg, #e6f7ff, #56d380 120%);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: #409eff;
  }
}

.entry-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.entry-icon {
  font-size: 36px;
  margin-bottom: 10px;
  color: #409eff;
}

.entry-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.drawer-content {
  padding: 20px;
}

.drawer-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.drawer-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
</style>